<template>
	<view class="infoBanner">
		<scroll-view scroll-y>
			<view class="set">
				<!-- <uni-icons class="set-icon" type="hand-up" size="25"></uni-icons> -->
				<text class="sign" @click="doSign()">每日签到</text>
			</view>
			<view class="info-data">
				<view class="avator">
					<image :src="userData.avator" mode="aspectFill"></image>
				</view>
				<view class="nickname">
					{{userData.nickname}}
				</view>
				<view class="level">
					<text>Lv1. </text>
					<text>{{userData.score}}积分</text>
				</view>
			</view>
			<view class="data-count">
				<view class="item" @click="goUrl('/pages/article/collect')">
					<text class="count">{{userData.collect}}</text>
					<text class="title">收藏</text>
				</view>
				<view class="item" @click="goUrl('/pages/article/my-article')">
					<text class="count">{{userData.art}}</text>
					<text class="title">文章</text>
				</view>
				<view class="item" @click="goUrl('/pages/comment/comment')">
					<text class="count">{{userData.comment}}</text>
					<text class="title">评论</text>
				</view>
				<view class="item" @click="goUrl('/pages/follow/follow')">
					<text class="count">{{userData.follow}}</text>
					<text class="title">关注</text>
				</view>
				<view class="item" @click="goUrl('/pages/follow/fans')">
					<text class="count">{{userData.fans}}</text>
					<text class="title">粉丝</text>
				</view>
			</view>
			<view class="go-action">
				<view class="act-item" v-for="item in goAct" @click="goUrl(item)">
					<uni-icons class="icon" :type="item.icon" size="28" color="#9ca3af"></uni-icons>
					<text class="title">{{item.title}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		apiDoSign,
		apiGetAccount,
		apiLogOut
	} from '@/api/apis';
	import {
		isObject
	} from '@vue/shared';
	import {
		useUserStore
	} from '@/store/user';
	let goAct = ref([{
			url: '/pages/user/account',
			title: '个人信息',
			icon: 'person',
		}, {
			url: '/pages/shop/scoreShop',
			title: '积分商城',
			icon: 'cart',
		},
		{
			url: "/pages/shop/addScore",
			title: '积分充值',
			icon: 'shop',
		},
		{
			url: "/pages/fake/fake",
			title: '卡密兑换',
			icon: 'wallet',
		}, {
			url: '/pages/user/change_pwd',
			title: '修改密码',
			icon: 'locked',
		}, {
			title: '退出登录',
			icon: 'undo',
		}
	])
	let userData = ref([])
	onLoad(async () => {
		await apiGetAccount().then(res => {
			userData.value = res.data
		})
	})
	const doSign = async () => {
		await apiDoSign().then(res => {
			uni.showToast({
				icon: "none",
				title: res.msg
			})
		})
	}
	const goUrl = (item) => {
		if (isObject(item)) {
			if (item.title == "退出登录") {
				uni.showModal({
					title: "温馨提示:",
					content: "确定要退出登录吗?",
					success: async res => {
						if (res.confirm) {
							await useUserStore().logOut()
						}
					}
				})
			} else {
				uni.navigateTo({
					url: item.url
				})
			}

		} else {
			uni.navigateTo({
				url: item
			})
		}
	}
</script>

<style lang="scss" scoped>
	.infoBanner {
		padding: 20rpx;

		.set {
			display: flex;
			justify-content: flex-end;
			height: 76rpx;
			align-items: center;

			.sign {
				color: $theme-color;
			}

			.set-icon {
				color: #4b5563;
			}
		}

		.info-data {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.avator {
				height: 153rpx;
				width: 153rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.nickname {
				font-size: 29rpx;
				font-weight: 700;
				margin: 10rpx 0;
			}

			.level {
				font-size: 20rpx;
				color: #7d838f;
			}
		}

		.data-count {
			display: grid;
			gap: 5rpx;
			grid-template-columns: repeat(5, 1fr);
			height: 200rpx;
			// background: #fafafa;
			border-radius: 20rpx;

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.count {
					font-size: 28rpx;
					color: #000;
				}

				.title {
					font-size: 24rpx;
					color: #6b7280;
					margin-top: 10rpx;
					display: inline-block;
				}
			}
		}

		.go-action {
			.act-item {
				height: 109rpx;
				display: flex;
				align-items: center;
				padding-left: 28rpx;
				margin-bottom: 15rpx;
				border-radius: 18rpx;

				.icon {
					margin-right: 20rpx;
					color: #9ca3af;
					font-size: 28rpx;
				}

				.title {
					color: #000;
					font-size: 28rpx;
				}
			}
		}
	}
</style>